import React from 'react'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import {Button, Col, Icon, Input, Row, Select, Table} from 'antd'
import Screen from "../../../../components/Base/Screen";
import ContentWrap from "../../../../components/Base/ContentWrap";
import styles from './index.module.css';

const Option = Select.Option;
const columns = [{
    title: '规则编号',
    dataIndex: 'name',
    // render: text => <a href="javascript:;">{text}</a>,
}, {
    title: '描述',
    dataIndex: 'describe',
}, {
    title: '服务调用次数',
    dataIndex: 'number',
    sorter: true,
}, {
    title: '状态',
    dataIndex: 'state',
    filters: [
        {text: 'Male', value: 'male'},
        {text: 'Female', value: 'female'},
    ],
}, {
    title: '更新时间',
    dataIndex: 'time',
    sorter: true,
}, {
    title: '操作',
    dataIndex: 'operation',
}];
const data = [{
    key: '1',
    name: 'TradeCode 0',
    describe: '这是一段描述',
    number: '767万',
    state: '关闭',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}, {
    key: '2',
    name: 'TradeCode 1',
    describe: '这是一段描述',
    number: '767万',
    state: '异常',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}, {
    key: '3',
    name: 'TradeCode 2',
    describe: '这是一段描述',
    number: '767万',
    state: '已上线',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}, {
    key: '4',
    name: 'TradeCode 3',
    describe: '这是一段描述',
    number: '767万',
    state: '运行中',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}, {
    key: '5',
    name: 'TradeCode 1',
    describe: '这是一段描述',
    number: '767万',
    state: '异常',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}, {
    key: '6',
    name: 'TradeCode 2',
    describe: '这是一段描述',
    number: '767万',
    state: '已上线',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}, {
    key: '7',
    name: 'TradeCode 3',
    describe: '这是一段描述',
    number: '767万',
    state: '运行中',
    time: '2017-07-01 00:00:00',
    operation: '配置 | 订阅警报'
}];

// rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};

class ModelTool extends Screen {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this.props)
    }


    render() {
        return (
            <ContentWrap>
                <Row style={{backgroundColor: '#fff', padding: '20px', marginTop: '20px'}}>
                    <Col xs={24} sm={24} md={24} className={styles.formTop}>
                        <Col xs={24} sm={24} md={24} lg={8} style={{marginBottom: '24px'}}>
                            {/*<span className={styles.fontFourteen}>使用状态：</span>*/}
                            <Select defaultValue="default" style={{width: '70%'}}>
                                <Option value="default">default</Option>
                            </Select>
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={8} className={styles.formTopLeft}>
                            {/*<span className={styles.fontFourteen}>规则编号：</span>*/}
                            <Input placeholder="表名" style={{width: '70%'}}/>
                        </Col>

                        <Col xs={24} sm={24} md={24} lg={8} style={{marginBottom: '24px'}}>
                            <Button type="primary" style={{marginRight: '8px'}}>查询</Button>
                            {/*<Button>重置</Button>*/}
                        </Col>
                    </Col>
                    <Col xs={24} sm={24} md={24} className={styles.mbSixteen}>
                        <Button type="primary" style={{marginRight: '8px'}}><Icon type="plus"/>新建</Button>
                        <Button type="primary" style={{marginRight: '8px'}}>批量操作</Button>
                        <Select defaultValue="更多操作">
                            <Option value="关闭">删除</Option>
                            <Option value="进行中">批量审批</Option>
                        </Select>
                    </Col>
                    <Col xs={24} sm={24} md={24} className={styles.tableAlert}>
                        <div className={styles.tableAlertDiv}>
                            <span><Icon type="info-circle" style={{marginRight: '10px'}}/>已选择&nbsp;&nbsp;
                                <a className={styles.clearLink} style={{fontWeight: 600}}>0</a>&nbsp;&nbsp;项&nbsp;&nbsp;
                                <span style={{marginLeft: '8px'}}>服务调用次数总计&nbsp;
                                    <span style={{fontWeight: 600}}>0 万</span>
                                </span>
                                <a className={styles.clearLink} style={{marginLeft: '24px'}}>清空</a>
                            </span>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24}>
                        <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
                    </Col>
                </Row>
            </ContentWrap>
        )
    }
}

export default withRouter(connect()(ModelTool))

